
<template>
  <div class="app-container"  style="width: 100%; height: calc(100vh - 84px);">
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px;width: 100%; height: calc(100vh - 84px)">
      <div id="myChart1" style="width: 100%; height: calc(100vh - 84px)"></div>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./dashboard/mixins/resize";
import { listData } from "@/api/system/data";

export default {
  name: "Index",

  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 999999,
        addressId: undefined,
        address: undefined,
      },
      dataList: [],
      addressOptions: [],
      dateRange: [],
    };
  },
  mounted() {
    this.queryParams.address = this.$route.query.address;
    this.getList(); //执行下面的函数
  },
  methods: {
    getList() {
      this.loading = true;

      listData(this.queryParams).then((response) => {
        var ar = {};
        this.dataList = response.rows;
        this.dataList = this.dataList.sort(function (a, b) {
          return a.dataId - b.dataId;
        });
        var times = [];
        var wendu = [];
        var shidu = [];
        var qiya = [];
        var pm25 = [];
        var pm10 = [];
        var aqi = [];
        this.dataList.forEach((e) => {
          if (ar[e.wuran] == undefined) {
            ar[e.wuran] = 1;
          } else {
            ar[e.wuran] = ar[e.wuran] + 1;
          }
          times.push(e.createTime);
          wendu.push(e.wendu);
          shidu.push(e.shidu);
          qiya.push(e.qiya);
          pm25.push(e.pm25);
          pm10.push(e.pm10);
          aqi.push(e.aqi);
        });
        var opt = {
        
          tooltip: {
            trigger: "axis",
            triggerOn:"mousemove",
            extraCssText: 'transform: rotate(90deg)'
          },
          legend: {
            data: ["温度", "湿度", "气压", "PM2.5", "PM10", "AQI"],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "value",
          
            boundaryGap: false,
           
            nameRotate: -90, //坐标轴名字旋转，角度值。
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              rotate: 90, //刻度标签旋转的角度，
            },
            scale: true, //是否是脱离 0 值比例
          },
          yAxis: {
              type: "category",
               data: times,
            inverse: "true", //是否是反向坐标轴。
            axisLabel: {
              rotate: -90,
            },
          },
          series: [
            {
              name: "温度",
              type: "line",
              stack: "总量",
              data: wendu,
            },
            {
              name: "湿度",
              type: "line",
              stack: "总量",
              data: shidu,
            },
            {
              name: "气压",
              type: "line",
              stack: "总量",
              data: qiya,
            },
            {
              name: "PM2.5",
              type: "line",
              stack: "总量",
              data: pm25,
            },
            {
              name: "PM10",
              type: "line",
              stack: "总量",
              data: pm10,
            },
            {
              name: "AQI",
              type: "line",
              stack: "总量",
              data: aqi,
            },
          ],
        };

        let myChart = echarts.init(document.getElementById("myChart1"));
        myChart.setOption(opt);
      });
    },
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    drawLine() {
      nowYumi().then((res) => {
        let myChart = echarts.init(document.getElementById("myChart1"));
        opt.xAxis[0].data = res.names;
        opt.title.text = "玉米的生长情况";
        opt.series[0].name = "玉米的生长情况";
        opt.series[0].data = res.datas;
        myChart.setOption(opt);
      });

      nowQixiang().then((res) => {
        let myChart = echarts.init(document.getElementById("myChart2"));
        opt.xAxis[0].data = res.names;
        opt.title.text = "气象环境情况";
        opt.series = [
          {
            name: "温度",
            type: "line",
            data: res.wendu,
          },
          {
            name: "湿度",
            type: "line",
            data: res.shidu,
          },
          {
            name: "风力",
            type: "line",
            data: res.fengli,
          },
          {
            name: "降水",
            type: "line",
            data: res.jiangshui,
          },
        ];
        myChart.setOption(opt);
      });

      nowTurang().then((res) => {
        let myChart = echarts.init(document.getElementById("myChart3"));
        opt.xAxis[0].data = res.names;
        opt.title.text = "土壤情况";
        opt.series = [
          {
            name: "温度",
            type: "line",
            data: res.wendu,
          },
          {
            name: "湿度",
            type: "line",
            data: res.shidu,
          },
          {
            name: "ph",
            type: "line",
            data: res.ph,
          },
        ];
        myChart.setOption(opt);
      });

      nowShuifei().then((res) => {
        let myChart = echarts.init(document.getElementById("myChart4"));
        opt.xAxis[0].data = res.names;
        opt.title.text = "水肥情况";
        opt.series = [
          {
            name: "施水量",
            type: "line",
            data: res.shui,
          },
          {
            name: "施氮量",
            type: "line",
            data: res.dan,
          },
          {
            name: "施磷量",
            type: "line",
            data: res.lin,
          },
          {
            name: "施钾量",
            type: "line",
            data: res.jia,
          },
        ];
        myChart.setOption(opt);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
 